<template>
  <div id="main">
    <!-- 小说推荐部分 -->
    <div id="hotcontent">
      <!-- 推荐左边区域 -->
      <div class="lefts">
        <div class="item" v-for="result in Infoslist" :key="result.id">
          <div class="images">
            <!-- JumpDetailRoute跳转小说详情页面 -->
            <a href="javascript:;" @click="JumpDetailRoute(result.book_id)">
              <img :src="result.image_urls" :alt="result.book_name" />
            </a>
          </div>

          <dl>
            <dt>
              <span>{{ result.book_author }}</span>
              <a href="javascript:;" @click="JumpDetailRoute(result.book_id)">{{
                result.book_name
              }}</a>
            </dt>
            <dd>{{ result.book_desc | StrStrip }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
      </div>
      <!-- 推荐右边区域 -->
      <div class="rights">
        <h2>公告牌</h2>
        <ul>
          <li>
            <span class="s1">[公告]</span>
            <span class="s2">
              <a href="javascript:;" target="_blank">发现章节未及时更新请联系我们</a>
            </span>
          </li>
        </ul>
        <h2>完本小说推荐</h2>
        <ul>
          <li v-for="item in Completelist" :key="item.book_id">
            <span class="s1">[{{ item.book_cate }}]</span>
            <span class="s2">
              <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
                item.book_name
              }}</a>
            </span>
            <span class="s3">{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="dahengfu"></div>

    <!-- 六大类型小说 -->
    <!-- 玄幻修真都市 -->
    <div class="novelslist">
      <div class="content">
        <h2>玄幻小说</h2>
        <div class="top">
          <div class="image">
            <img
              :src="XHfitst.image_urls"
              :alt="XHfitst.book_name"
              width="67"
              height="82"
            />
          </div>
          <dl>
            <dt>
              <a href="javascript:;">{{ XHfitst.book_name }}</a>
            </dt>
            <dd>{{ XHfitst.book_desc }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
        <ul>
          <li v-for="item in XuanhuanData.result" :key="item.book_id">
            <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
              item.book_name
            }}</a>
            <span>/{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="content">
        <h2>修真小说</h2>
        <div class="top">
          <div class="image">
            <img
              :src="XZfitst.image_urls"
              :alt="XZfitst.book_name"
              width="67"
              height="82"
            />
          </div>
          <dl>
            <dt>
              <a href="javascript:;" @click="JumpDetailRoute(XZfitst.book_id)">{{
                XZfitst.book_name
              }}</a>
            </dt>
            <dd>{{ XZfitst.book_desc }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
        <ul>
          <li v-for="item in XiuzhenData.result" :key="item.book_id">
            <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
              item.book_name
            }}</a>
            <span>/{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="content border">
        <h2>都市小说</h2>
        <div class="top">
          <div class="image">
            <img
              :src="DSfitst.image_urls"
              :alt="DSfitst.book_name"
              width="67"
              height="82"
            />
          </div>
          <dl>
            <dt>
              <a href="javascript:;" @click="JumpDetailRoute(DSfitst.book_id)">{{
                DSfitst.book_name
              }}</a>
            </dt>
            <dd>{{ DSfitst.book_desc }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
        <ul>
          <li v-for="item in DushiData.result" :key="item.book_id">
            <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
              item.book_name
            }}</a>
            <span>/{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <!-- 历史科幻网游 -->
    <div class="novelslist">
      <div class="content">
        <h2>历史小说</h2>
        <div class="top">
          <div class="image">
            <img
              :src="LSfitst.image_urls"
              :alt="LSfitst.book_name"
              width="67"
              height="82"
            />
          </div>
          <dl>
            <dt>
              <a href="javascript:;" @click="JumpDetailRoute(LSfitst.book_id)">{{
                LSfitst.book_name
              }}</a>
            </dt>
            <dd>{{ LSfitst.book_desc }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
        <ul>
          <li v-for="item in LishiData.result" :key="item.book_id">
            <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
              item.book_name
            }}</a>
            <span>/{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="content">
        <h2>科幻小说</h2>
        <div class="top">
          <div class="image">
            <img
              :src="KHfitst.image_urls"
              :alt="KHfitst.book_name"
              width="67"
              height="82"
            />
          </div>
          <dl>
            <dt>
              <a href="javascript:;" @click="JumpDetailRoute(KHfitst.book_id)">{{
                KHfitst.book_name
              }}</a>
            </dt>
            <dd>{{ KHfitst.book_desc }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
        <ul>
          <li v-for="item in KehuanData.result" :key="item.book_id">
            <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
              item.book_name
            }}</a>
            <span>/{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="content border">
        <h2>网游小说</h2>
        <div class="top">
          <div class="image">
            <img
              :src="WYfitst.image_urls"
              :alt="WYfitst.book_name"
              width="67"
              height="82"
            />
          </div>
          <dl>
            <dt>
              <a href="javascript:;" @click="JumpDetailRoute(WYfitst.book_id)">{{
                WYfitst.book_name
              }}</a>
            </dt>
            <dd>{{ WYfitst.book_desc }}</dd>
          </dl>
          <div class="clear"></div>
        </div>
        <ul>
          <li v-for="item in WangyouData.result" :key="item.book_id">
            <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
              item.book_name
            }}</a>
            <span>/{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>

    <!-- 最近更新以及言情小说limit30 -->
    <div id="newscontent">
      <!-- 最近更新 -->
      <div class="l">
        <h2>最近更新小说列表</h2>
        <ul>
          <li v-for="item in Update_times" :key="item.book_id">
            <span class="s1">[{{ item.book_cate }}小说]</span>
            <span class="s2">
              <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
                item.book_name
              }}</a>
            </span>
            <span class="s3">
              <a href="javascript:;" @click="JumpChapterRoute(item.book_id,item.book_newest_url)">{{ item.book_newest_name }}</a>
            </span>
            <span class="s4">{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <!-- 言情 -->
      <div class="r">
        <h2>言情小说推荐</h2>
        <ul>
          <li v-for="item in Romancelist" :key="item.book_id">
            <span class="s1">[{{ item.book_cate }}]</span>
            <span class="s2">
              <a href="javascript:;" @click="JumpDetailRoute(item.book_id)">{{
                item.book_name
              }}</a>
            </span>
            <span class="s5">{{ item.book_author }}</span>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>

    <!-- 友情链接 -->
    <div id="firendlink">
      <span>友情链接：</span>
      <a href="https://www.xbiquge.la/" target="_blank">新笔趣阁</a>
      <a href="https://www.xbiquge.la/0/231/" target="_blank">武神风暴</a>
      <a href="https://www.sobiquge.com/book/51250/" target="_blank">狂枭</a>
      <a href="https://www.12zw.la/7/7954/" target="_blank">修罗天帝</a>
      <a href="https://www.sobiquge.com/book/42363/" target="_blank"
        >丹皇武帝</a
      >
      <a href="https://www.xbiquge.la/14/14930/" target="_blank">元尊</a>
      <a href="https://www.xbiquge.la/0/8/" target="_blank">大主宰</a>
      <a href="https://www.xbiquge.la/0/15/" target="_blank">武动乾坤</a>
      <a href="https://www.xbiquge.la/55/55945/" target="_blank">万相之王</a>
      <a href="https://www.bifeige.com/11_11806/" target="_blank"
        >学霸之黑科技系统</a
      >
      <a href="https://www.sobiquge.com/book/10026/" target="_blank"
        >逆天邪神</a
      >
      <a href="https://www.tianxiabachang.cn/0_804/" target="_blank"
        >超神机械师</a
      >
      <a href="https://www.zhhbiqu.com/63516_63516611/" target="_blank"
        >全职艺术家</a
      >
      <a href="https://www.quge6.com/87_87149/" target="_blank">大奉打更人</a>
      <a href="https://www.bifeige.com/12_12919/" target="_blank"
        >我的无限怪物分身</a
      >
      <a href="https://www.zhhbiqu.com/4_4517/" target="_blank">大医凌然</a>
      <a href="https://www.xp7000.com/8/8572/" target="_blank">宠魅</a>
      <a href="https://www.chinaz.com/" target="_blank">站长工具-站长之家</a>
      <a href="https://www.json.cn/" target="_blank">Json在线解析</a>
      <a href="https://www.bejson.com/explore/index_new/" target="_blank"
        >Json格式化工具</a
      >
      <a href="https://gitee.com/" target="_blank">Gitee</a>
      <a href="https://github.com/" target="_blank">GitHub</a>
      <a href="https://dormousehole.readthedocs.io/en/latest/" target="_blank"
        >Python-Flask</a
      >
      <a href="https://docs.djangoproject.com/zh-hans/2.0/" target="_blank"
        >Python-Django</a
      >
      <a href="https://www.osgeo.cn/scrapy/" target="_blank">Scrapy爬虫框架</a>
      <a href="http://www.bxwu.net/" target="_blank">免费小说网</a>
      <a href="https://www.csdn.net/" target="_blank">CSDN</a>
      <a href="https://www.cnblogs.com/" target="_blank">博客园</a>
      <a href="https://www.zygx8.com/" target="_blank">资源共享吧</a>
      <a href="http://www.nirenxing.com/forum.php" target="_blank"
        >逆人行IT技术社区</a
      >
      <a href="https://www.heywhale.com/home/dataset" target="_blank"
        >和鲸社区数据集</a
      >
      <a href="https://www.qiniu.com/" target="_blank">七牛云</a>
      <a href="https://pic.netbian.com/" target="_blank">8k-彼岸图网-壁纸</a>
      <a href="https://www.bootcss.com/" target="_blank"
        >Bootstrap前端开发框架</a
      >
      <a href="https://www.52pojie.cn/" target="_blank">吾爱破解</a>
      <a href="https://tieba.baidu.com/" target="_blank">百度贴吧</a>
      <a href="https://www.crawlab.cn/" target="_blank"
        >Crawlab 分布式爬虫管理平台</a
      >
      <a href="http://redis.cn/" target="_blank">Redis</a>
      <a href="https://www.mysqlzh.com/" target="_blank">MySQL5.1</a>
      <a href="https://docs.mongoing.com/" target="_blank">MongoDB</a>
      <a
        href="https://www.runoob.com/linux/linux-file-attr-permission.html"
        target="_blank"
        >Linux</a
      >
      <a href="https://help.ubuntu.com/" target="_blank">Ubuntu</a>
      <a href="https://www.iconfont.cn/" target="_blank"
        >iconfont-阿里巴巴矢量图标网</a
      >
      <a href="https://www.bitbug.net/" target="_blank"
        >比特虫在线制作ico图标</a
      >
      <a href="https://cn.vuejs.org/v2/guide/" target="_blank"
        >Vue前端组件化框架</a
      >
      <a href="https://www.jb51.net/Special/481.htm" target="_blank"
        >JavaScript加密解密</a
      >
      <a href="https://www.kuaidaili.com/" target="_blank">快代理</a>
      <a href="https://www.kanxue.com/" target="_blank">看雪学院</a>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import '../../assets/css/index.css'

export default {
  data() {
    return {
      // 推荐小说数据列表
      Infoslist: [],
      // 完结小说数据列表
      Completelist: [],
      // 玄幻小说数据limit13
      XuanhuanData: [],
      XHfitst: {},
      // 修真小说数据limit13
      XiuzhenData: [],
      XZfitst: {},
      // 都市小说数据limit13
      DushiData: [],
      DSfitst: {},
      // 历史小说数据limit13
      LishiData: [],
      LSfitst: {},
      // 科幻小说数据limit13
      KehuanData: [],
      KHfitst: {},
      // 网游小说数据limit13
      WangyouData: [],
      WYfitst: {},
      // 最近更新的limit30小说数据
      Update_times: [],
      // 言情小说limit30
      Romancelist: []
    }
  },
  created() {
    // 获取分类小说数据
    this.getCateLimit(),
      // 获取六种类型小说数据
      this.getCatesdata(),
      // 获取最近更新以及言情limit30列表数据
      this.getUpdateRmo()
  },
  methods: {
    // 点击事件，跳转小说详情页
    JumpDetailRoute(book_id) {
      this.$router.push({
        path: '/book/' + book_id
      })
    },
    // 点击事件，跳转小说章节页
    JumpChapterRoute(book_id,sort_id) {
      this.$router.push({
        path: '/chapter/' + book_id + '/' + sort_id
      })
    },
    //获取推荐以及完结小说的列表数据
    async getCateLimit() {
      const { data: res } = await this.$http.get(`get_cate_limit/${4}`)
      // console.log(this.$store.dispatch('get_book_cate', 4))

      if (res.status !== 200) {
        return this.$message.error('获取数据失败！')
      }
      // 请求成功将数据赋值给 Infoslist 变量
      this.Infoslist = res.data
      // console.log(this.Infoslist)

      const { data: res2 } = await this.$http.get('get_complete_limit')

      // console.log(res)
      if (res2.status !== 200) {
        return this.$message.error('获取数据失败！')
      }
      // 请求成功将数据赋值给 Infoslist 变量
      this.Completelist = res2.data
      // console.log(this.Completelist)
    },
    // 获取六种类型小说数据
    async getCatesdata() {
      // 玄幻小说
      const { data: res } = await this.$http.get(`get_cates_data/${'玄幻'}`)

      if (res.status !== 200) {
        return this.$message.error('获取玄幻数据失败！')
      }

      this.XuanhuanData = res.data[0]
      this.XHfitst = res.data[1].first_data
      // console.log(this.XuanhuanData)

      // 修真小说
      const { data: xzres } = await this.$http.get(`get_cates_data/${'修真'}`)

      if (xzres.status !== 200) {
        return this.$message.error('获取修真数据失败！')
      }

      this.XiuzhenData = xzres.data[0]
      this.XZfitst = xzres.data[1].first_data

      // 都市小说
      const { data: dsres } = await this.$http.get(`get_cates_data/${'都市'}`)

      if (dsres.status !== 200) {
        return this.$message.error('获取都市数据失败！')
      }

      this.DushiData = dsres.data[0]
      this.DSfitst = dsres.data[1].first_data

      // 历史 小说
      const { data: lsres } = await this.$http.get(`get_cates_data/${'历史'}`)

      if (lsres.status !== 200) {
        return this.$message.error('获取历史数据失败！')
      }

      this.LishiData = lsres.data[0]
      this.LSfitst = lsres.data[1].first_data

      // 科幻小说
      const { data: khres } = await this.$http.get(`get_cates_data/${'科幻'}`)

      if (khres.status !== 200) {
        return this.$message.error('获取科幻数据失败！')
      }

      this.KehuanData = khres.data[0]
      this.KHfitst = khres.data[1].first_data

      // 网游小说
      const { data: wyres } = await this.$http.get(`get_cates_data/${'网游'}`)

      if (wyres.status !== 200) {
        return this.$message.error('获取网游数据失败！')
      }

      this.WangyouData = wyres.data[0]
      this.WYfitst = wyres.data[1].first_data
    },
    // 获取最近更新以及言情limit30列表数据
    async getUpdateRmo() {
      const { data: res } = await this.$http.get('get_update_romance_limit')

      if (res.status !== 200) {
        return this.$message.error('获取数据失败！')
      }

      this.Update_times = res.data[0].update_time
      this.Romancelist = res.data[0].romance_data
      // console.log(this.Romancelist)
    }
  },
  // 此时，页面上的元素，已经被渲染完毕了！
  // mounted(){
  //   get_cate_list: {
  //     this.$store.dispatch('get_book_cate',4)
  //   }
  // },

  // 过滤器
  //   filters: {
  //     StrStrip: function(value) {
  //         // 去除开头结尾中间的特殊字符，中间只留一个空格
  //         return value.toString().simplified();
  //     }
  //   }
}
</script>

<style lang="less"></style>
